<template>
	<div class="breedRecordWrap">
		<!-- 操作区 -->
		<div class="head">
			<h2>羊只配种记录表</h2>
			<div class="btnsBox">
				<u-button type="success" size="medium" @click="showAddOrUpdate = true">新 增</u-button>
				<u-button type="success" size="medium" @click="showSearch = true">搜 索</u-button>
			</div>
		</div>
		<div class="body">
			<!-- 表格数据 -->
			<scroll-view class="tableBox" scroll-x="true" scroll-left="120">
				<!-- 
					表格组件v-table:
					columns:表头数据
					list:表格内容数据
				 -->
				<v-table :columns="columns" :list="data"></v-table>
			</scroll-view>
		</div>
		<!-- 增加或者修改 -->
		<u-popup v-model="showAddOrUpdate" mode="center" width="90%" height="90%" border-radius="10" closeable>
			<u-form :model="form" ref="uForm">
				<u-form-item label="母羊编号" label-align="center" label-width="260upx"><u-input v-model="form.name" /></u-form-item>
				<u-form-item label="公羊编号" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="放栓时间(母)" label-align="center" label-width="260upx">
					2022-4-3
					<u-button @click="showCalendar = true" size="mini">选择日期</u-button>
				</u-form-item>
				<u-form-item label="撤栓时间(母)" label-align="center" label-width="260upx">
					2022-4-3
					<u-button @click="showCalendar = true" size="mini">选择日期</u-button>
				</u-form-item>
				<u-form-item label="PMSG(母)" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="PG" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="采精量(公)" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="精液活力(公)" label-align="center" label-width="260upx">
					<u-radio-group v-model="form.value" @change="radioGroupChange">
						<u-radio name="优">优</u-radio>
						<u-radio name="良">良</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="精液密度(公)" label-align="center" label-width="260upx">
					<u-radio-group v-model="form.value" @change="radioGroupChange">
						<u-radio name="优">优</u-radio>
						<u-radio name="良">良</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="稀释倍数(公)" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="采集日期(公)" label-align="center" label-width="260upx">
					2022-4-3
					<u-button @click="showCalendar = true" size="mini">选择日期</u-button>
				</u-form-item>
				<u-form-item label="第一次发情日期(母)" label-align="center" label-width="260upx">
					2022-4-3
					<u-button @click="showCalendar = true" size="mini">选择日期</u-button>
				</u-form-item>
				<u-form-item label="第一次发情数量(母)" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="第二次发情日期(母)" label-align="center" label-width="260upx">
					2022-4-3
					<u-button @click="showCalendar = true" size="mini">选择日期</u-button>
				</u-form-item>
				<u-form-item label="第二次发情数量(母)" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="第一次输精量(公)" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="第一次输精时间(公)" label-align="center" label-width="260upx">
					2022-4-3
					<u-button @click="showCalendar = true" size="mini">选择日期</u-button>
				</u-form-item>
				<u-form-item label="第二次输精量(公)" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="第二次输精时间(公)" label-align="center" label-width="260upx">
					2022-4-3
					<u-button @click="showCalendar = true" size="mini">选择日期</u-button>
				</u-form-item>
				<u-form-item label="备注" label-align="center" label-width="260upx"><u-input v-model="form.intro" /></u-form-item>
				<u-form-item label="" label-align="center" label-width="260upx"><u-button>保存</u-button></u-form-item>
			</u-form>
		</u-popup>
		<!-- 搜索 -->
		<u-popup v-model="showSearch"></u-popup>
		<!-- 日历 -->
		<u-calendar v-model="showCalendar" mode="date"></u-calendar>
	</div>
</template>

<script>
export default {
	name: 'breedRecord',
	data() {
		return {
			showAddOrUpdate: false, // 是否显示添加或删除框
			showSearch: false, // 是否显示搜索
			showCalendar: false, // 是否显示日历
			queryInfo: {
				pagenum: 1, // 当前页码
				pagesize: 10, // 当前每页显示的数据数
				total: 0 //
			},
			form: {
				// 新增或修改的表单数据
				name: '',
				intro: '',
				sex: '',
				value: '优'
			},
			data: [], // 表格数据
			columns: [
				// 表格表头数据,title为表头,key对应表格数据list中的每项的id
				{ title: '牧户姓名', key: 'NAME' },
				{ title: '母羊编号', key: 'EWE_ID' },
				{ title: '公羊编号', key: 'RAM_ID' },
				{ title: '放栓时间', key: 'BEGIN_DATE' },
				{ title: '撤栓时间', key: 'FINISH_DATE' },
				{ title: 'PMSG', key: 'PMSG' },
				{ title: 'PG', key: 'PG' },
				{ title: '采精量(ml)', key: 'ADOPT_PRECISE' },
				{ title: '精液活力', key: 'VITALITY' },
				{ title: '精液密度', key: 'DENSITY' },
				{ title: '稀释倍数', key: 'DILUTION_RATIO' },
				{ title: '采集日期', key: 'DATE' },
				{ title: '发情鉴定-日期', key: 'HEAT_FIRM1_DATE' },
				{ title: '发情鉴定-数量', key: 'HEAT_FIRM1_NUMBER' },
				{ title: '发情鉴定-日期', key: 'HEAT_FIRM2_DATE' },
				{ title: '发情鉴定-数量', key: 'HEAT_FIRM2_NUMBER' },
				{ title: '第一次输精-输精量', key: 'SPERM_RECORD1' },
				{ title: '第一次输精-输精时间', key: 'SPERM_RECORD1_DATE' },
				{ title: '第二次输精-输精量', key: 'SPERM_RECORD2' },
				{ title: '第二次输精-输精量', key: 'SPERM_RECORD2_DATE' },
				{ title: '备注', key: 'remark' },
				{ title: '操作', key: '' }
			]
		}
	},
	methods: {
		//进入页面默认加载
		async handleRequestGetInfo(isPage) {
			console.log('执行了')
			try {
				let { data } = await this.$axios({
					method: 'post',
					url: '/breedInfo/breedRecord',
					data: {
						sortLowNum: '',
						ISAsc: '',
						page: this.queryInfo.pagenum,
						isPage
					}
				})
				this.data = data.result
				console.log(data)
			} catch (e) {
				console.log('失败')
			}
		},
		// 单选框切换事件
		radioGroupChange(e) {
			console.log(e)
		}
	},
	mounted() {
		// 进入页面，获取第一页表格数据
		this.handleRequestGetInfo(1)
	}
}
</script>

<style lang="scss" scoped>
.breedRecordWrap {
	.head {
		padding: 20upx;
		h2 {
			text-align: center;
		}
		.btnsBox {
			display: flex;
		}
	}
	.body {
		padding: 20upx;
	}
}
</style>
